<template>
	<view class="mx-user-info" @tap="onTap">
		<!-- <view :class="['user-avatar', isLogin ? '': 'default-avatar']" :style="styleObj"></view> -->
		<image :class="['user-avatar', isLogin ? '': 'default-avatar']" :src="detail.avatar_url"></image>
		
		<view class="user-name">
			{{userName}} 
			<view class="login-tip" v-if="!isLogin">点击登陆账号</view>
		</view>
	</view>
</template>icon

<script>
	import {imgUrl} from '@/utils/config.js'
	
	export default {
		name:"MxUserInfo",
		props:{
			detail:{}
		},
		data() {
			return {
				 imgPrefix:imgUrl,
				 defaultAvatart: '',
				 defaultName: '',
				 styleObj: {}
			};
		},
		computed: {
			isLogin() {
				return Object.keys(this.detail).length !== 0
			},
			
			userName() {
				return this.isLogin ? this.detail.nick_name: '未登录'
			}
		},
		
		watch: {
			isLogin(val) {
				if(val) {
					this.styleObj = {
						backgroundImage: `url(${this.detail.avatar_url})`
					}
				}	
			}
		},
		
		methods: {
			onTap() {
				// if(!this.isLogin) {
				// 	this.$emit('login')
				// }else{
				// 	this.$navTo('pages/mine/user-info')
				// }
				
				if(!this.isLogin) {
					uni.navigateTo({
					  url: "/pages/login/index"
					})
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	@import '@/common/scss/mixins.scss';
	@import '@/common/scss/var.scss';
.mx-user-info {
	box-sizing: border-box;
	width: 100%;
	padding: 0 8rpx;
	padding-top: 40rpx;
	font-family: $font-family;
	display: flex;
	align-items: center;
	.user-avatar{
		flex-shrink: 0;
		width: 160rpx;
		height: 160rpx;
		// border: solid 1px #707070;
		border-radius: 50%;
		background-image: url(@/static/imgs/default-avatar.png);
		@include bg-img-cover;
		
		&.default-avatar{
			background-image: url(@/static/imgs/default-avatar.png);
		}
	}
	
	.user-name{
		margin-left: 54rpx;
		font-weight: bold;
		font-size: 20px;
		
		.login-tip{
			margin-top: 6px;
			font-weight: normal;
			font-size: 14px;
		}
	}
}
</style>
